<template>
  <div class="container">
    <el-form :model="loginForm" ref="loginRef" :rules="loginRules" :inline="false" size="normal">
      <el-form-item>
        <div class="login_title">
          系统登录
        </div>
      </el-form-item>
      <el-form-item prop="username">
        <el-input placeholder="请输入用户名" v-model="loginForm.username"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input placeholder="请输入密码" v-model="loginForm.password" type="password"></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-row :gutter="20">
          <el-col :span="16">
            <el-input placeholder="请输入验证码" v-model="loginForm.code"></el-input>
          </el-col>
          <el-col :span="8">
            <img :src="imgSrc" @click="getImage">
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-button type="primary" size="default" @click="onSubmit" class="btn">登录</el-button>
          </el-col>
          <el-col :span="12">
            <el-button size="default" class="btn">登录</el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
    
    
  </div>
</template>
<script>
import {login,getImageApi} from '../api/login'
import Cookies from 'js-cookie'
export default {
  data(){
    return {
      loginForm:{
        username:'',
        password:'',
        code:''
      },
      loginRules:{
        username:[
          {
            required:true,
            message:'请输入用户名',
            trriger:blur
          }
        ],
        password:[
          {
            required:true,
            message:'请输入密码',
            trriger:blur
          }
        ],
        code:[
          {
            required:true,
            message:'请输入验证码',
            trriger:blur
          }
        ]
      },
      imgSrc:''
    }
  },
  created(){
    this.getImage();
  },
  methods:{
    async getImage(){
      //获取验证
      //返回的数据是arraybuffer,需要转换为base64给img
      //1.arraybuffer转换为二进制
      //2.把二进制字符转换为base64字符
      let res = await getImageApi();
      let array = res.data;
      let imageData = "data:image/png;base64,"+
      btoa(
        new Uint8Array(array).reduce(
          (data,byte)=> data + String.fromCharCode(byte),""
        )
      )
      this.imgSrc = imageData;
    },
    onSubmit(){
      console.log('onSubmit');
      this.$refs.loginRef.validate(async valid=>{
        if(valid){
          // this.$message.error('请输入必输项')
          let res = await login(this.loginForm);
          console.log(res);
          if(res.data.code == 200){
            this.$message.success(res.data.msg);
            let datas = res.data;
            Cookies.set('token',datas.token);
            this.$router.push('/home')
          }else{
            this.$message.error(res.data.msg);
            return;
          }
        }else{
          this.$message.error('请输入必输项')
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .container{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .login_title{
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    font-size: 24px;
  }
  .btn{
    width: 100%;
  }
  .el-form{
    // border: 1px solid #d42111;
    height: 300px;
    width: 350px;
    border-radius: 10px;
    box-shadow: 0 0 25px #cac6c6;
    padding: 20px 35px;
  }
</style>